<template>
    <div>
        <div class="mycard">
            <div class="headPortrait">
                <!--            <el-image style="width: 60px;height: 60px" :src="url" fit="cover"/>-->
                <el-avatar shape="square" style="width: 50px;height: 50px" :src="url"></el-avatar>
            </div>

            <div class="right">
                <div class="nickname">
                    <span>{{nickname}}</span>
                </div>
                <div class="autograph">
                    <p style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap" contenteditable="true">
                        {{autograph}}</p>
                </div>
            </div>

        </div>
        <!--分割线-->
        <Divider></Divider>
    </div>

</template>

<script>
    import Divider from '../common/Divider'

    export default {
      name: 'mycard',
      components: {
        Divider
      },
      data() {
        return {
          url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          nickname: '爱喝开水的小锅牛',
          autograph: '不畏艰险，战胜一切'
        }
      }
    }
</script>

<style scoped>
    .mycard {
        margin: 10px;
        height: 50px;
    }

    .headPortrait {
        text-align: center;
        float: left;
        width: 50px;
        height: 50px;
    }

    .right {
        display: inline-block;
    }

    .nickname {
        margin-left: 10px;
        margin-top: 3px;
    }

    .nickname span {
        font-size: 12px;
    }

    .autograph {
        margin-left: 10px;
        margin-top: 3px;
        width: 200px;
    }

    .autograph p {
        font-size: 10px;
        color: #bab9b8;
    }

    .el-divider--horizontal {
        margin: 0;
    }
</style>
